﻿<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <!--    <meta name="renderer" content="webkit|ie-comp|ie-stand">-->
    <!--    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <!--    <meta http-equiv="Cache-Control" content="no-siteapp"/>-->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <title>产品交接单</title>

    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
    <script th:src="@{/erp/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/erp/Widget/Validform/5.3.2/Validform.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script>
    <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/js/jquery-ui-1.10.3.custom.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.ui.touch-punch.min.js}"></script>
    <script th:src="@{/erp/assets/js/ace-elements.min.js}"></script>
    <script th:src="@{/erp/assets/js/ace.min.js}"></script>
    <script th:src="@{/erp/js/lrtk.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>


</head>
<body>
<div class="page-content clearfix">
    <div id="Member_Ratings">
        <div class="search_style">
            <form>
                <ul class="search_content clearfix">
                    <li>
                        <label class="l_f">交接单查询：</label>
                        <input id="orderIds" type="text" class="text_add" placeholder="输入订单编号"
                               style=" width:400px" name="order_id"/>
                    </li>
                    <li>
                        <label class="l_f">交接时间：</label>
                        <input class="inline laydate-icon" id="start" style=" margin-left:10px;"
                               name="handoverDates">
                    </li>
                    <li style="width:90px;">
                        <button type="button" class="btn_search" id="find">
                            <i class="icon-search"></i>查询
                        </button>
                    </li>
                </ul>
            </form>
        </div>
        <div class="border clearfix">
                        <span class="l_f">
                            <button class="btn btn-warning" id="member_add"><i class="icon-plus"></i>新增交接单</button>
                            <button class="btn btn-danger" id="dels"><i class="icon-trash"></i>批量删除</button>
                        </span>
        </div>
        <div class="tab-content">
            <div id="home" class="tab-pane active">
                <table class="table table-striped table-bordered table-hover" id="sample-table" style="width:100%">
                    <thead>
                    <tr>
                        <th><label><input type="checkbox" class="ace"><span
                                class="lbl"></span></label></th>
                        <th>交接单号</th>
                        <th>订单编号</th>
                        <th>产品名称</th>
                        <th>生产部门</th>
                        <th>收货仓库</th>
                        <th>入库数量</th>
                        <th>交接日期</th>
                        <th>交接人</th>
                        <th>备注</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<script>
    jQuery(function ($) {

        var oTable1 = $('#sample-table').dataTable({
            "autoWidth": false,
            "bStateSave": true,//状态保存
            serverSide: true,   //开始服务器分页
            searching: false,  //关闭搜索框
            "aaSorting": [
                [1, "asc"]
            ],//默认第几个排序
            "aoColumnDefs": [
                {"orderable": false, "aTargets": [0, 3, 4, 5, 6, 7, 10]}// 制定列不参与排序
            ],
            ajax: {
                url: '/handover/list',
                type: 'post',
                data: function (d) {
                    var data = $('form').serialize();   //获取查询条件

                    //获取分页信息
                    var searchParams = {
                        start: d.start,
                        length: d.length,
                    };
                    data = data + '&' + $.param(searchParams);
                    return data;
                }
            },
            columns: [
                {
                    "width": "2%", "data": "id", "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<label><input type="checkbox" class="ace ace_cek" value="' + rowData.id + '"' +
                            'name="checkedid" ><span class="lbl"></span></label>');
                    }
                },
                {"data": "id"},
                {"data": "orderId"},
                {"data": "pname"},
                {"data": "productionName"},
                {"data": "wareName"},
                {"data": "num"},
                {"data": "handoverDate"},
                {"data": "head"},
                {"data": "remake"},
                {
                    "data": "state", "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData == "0") {
                            $(td).empty().append('<span class="label label-success radius">未被查看</span>');
                        } else if (cellData == "1") {
                            $(td).empty().append('<span class="label label-info radius">已被查看</span>');
                        }
                    }
                },
            ]
        });

        //搜索按钮事件
        $('#find').click(function () {
            oTable1.fnUpdate();  //具有刷新表格功能
        });


        //删除
        $('#dels').on('click', function () {
            var checkID = [];                                           //定义一个空数组
            $("input[name='checkedid']:checked").each(function (i) {    //把所有被选中的复选框的值存入数组
                checkID[i] = $(this).val();
            });
            if (checkID.length < 1) {
                layer.msg('必须选中一条以上数据!', {icon: 5, time: 2000});
            } else {
                $.ajax({
                    url: '/handover/del',
                    contentType: 'application/json; charset=UTF-8',
                    type: 'post',
                    dataType: 'json',
                    data: JSON.stringify(checkID),
                    success: function (e) {
                        if (e.rs){
                            oTable1.fnUpdate();
                            layer.msg('删除成功!', {icon: 1, time: 2000});
                        }else {
                            oTable1.fnUpdate();
                            layer.msg('删除失败!', {icon: 1, time: 2000});
                        }

                    }
                })
            }
        });

        //全选
        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });
        });
    })


    /*入库单-添加*/
    $('#member_add').on('click', function () {
        layer.open({
            type: 2,
            title: '新增交接单',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '500px'],
            content: 'phadd',
        });
    });

    laydate.render({
        elem: '#start',
        type: 'datetime'
    });
</script>

</body>
</html>

